<template>
    <div class="transfer">
        <!--<van-picker-->
                <!--show-toolbar-->
                <!--:title="palaceName"-->
                <!--:columns="options"-->
                <!--@cancel="onCancel"-->
                <!--@confirm="onConfirm"-->
        <!--&gt;</van-picker>-->
        <div style="position:fixed;top: 0px;left:0px;width: 100%;">
            <van-search
                    v-model.trim ="searchValue"
                    placeholder="请输入司机名/手机号关键词"
                    show-action
                    @search="onSearch">
                <!--<div slot="action" @click="onSearch">搜索</div>-->
            </van-search>
        </div>
        <div  style="background-color: #fff">
            <div class="check-list" @click="checkNo">不选</div>
            <div class="check-list" v-for="(item,index) in options" :key="index" @click="checkOption(item.id,item.text)">{{item.text}}</div>
        </div>
    </div>
</template>

<script>
    import {Picker,Toast,Search} from 'vant';
    export default {
        components: {
            [Picker.name]: Picker,
            [Search.name]: Search,
            [Toast.name]: Toast
        },
        props: {
            value: {
                type: Number,
                default: null
            },
            palaceName: {
                type: String,
                default: ''
            },
            cascaderOption: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                myValue: null,
                searchValue:'',
                options: [],
                baseData: [],
                times: null
            }
        },
        mounted() {
            if (this.cascaderOption) {
                let _this = this;
                _this.cascaderOption.forEach(item1=>{
                    if (item1.children) {
                        item1.children.forEach(item2=>{
                            if (item2.children) {
                                item2.children.forEach(item3=> {
                                    _this.options.push({
                                        id: item3.value,
                                        driver_name: item3.label,
                                        driver_phone: item3.phone,
                                        text: item1.label + ' / ' + item2.label + ' / ' +item3.label + ' ' + item3.phone
                                    })
                                })
                            }
                        });
                    }
                });
                _this.baseData = _this.options;
            }

        },
        watch: {
            value: function(val) {
                    this.myValue = this.value;
            },
            myValue: function(val) {
                    this.$emit('input', this.myValue);
            },
            searchValue: function(val) {
                clearInterval(this.times);
                this.times = setTimeout(() => {
                    this.onSearch();
                },500)
            }
        },
        methods: {
            onSearch() {
                let _this = this;
                _this.options = [];
                let reg = new RegExp(this.searchValue);
                if (_this.searchValue == '') {
                    _this.options = _this.baseData;
                } else {
                    _this.baseData.forEach((item,index)=> {
                        if (reg.test(item.driver_name)) {
                            _this.options.push(item);
                        } else if (reg.test(item.driver_phone)) {
                            _this.options.push(item);
                        }
                    });
                }
            },
            checkNo() {
                this.myValue = null;
                // this.$emit('closeSpotActionSheet');
                this.$emit('selectSpotSiteName','');
                this.searchValue= '';
            },
            checkOption(id,text) {
                this.myValue = id;
                // this.$emit('closeSpotActionSheet');
                this.$emit('selectSpotSiteName',text);
                this.searchValue= '';
            }
            // onConfirm(value, index) {
            //     if (value.id == 0) {
            //         this.myValue = '';
            //         this.$emit('selectSpotSiteName','');
            //         this.$emit('closeSpotActionSheet');
            //         return;
            //     } else {
            //         this.myValue = value.id;
            //         this.$emit('selectSpotSiteName',value.text);
            //     }
            // },
            // onCancel() {
            //     this.$emit('closeSpotActionSheet');
            // }
        }
    }
</script>

<style scoped lang="less">
    .transfer {
        padding-top: 46px;
        .check-list{
            text-align: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
    }
</style>
